<template>
	<view class="contain">
		<view class="background-image"></view>
		<view class="body">
			<view class="body-item title-input">
				<input type="text" placeholder="标题" placeholder-class="placeholder-style" v-model="uploadMessage.inputText" />
			</view>
			<view class="body-item content-input">
				<textarea name="" id="" cols="30" rows="10" 
					placeholder="在这里写下你的想法..." 
					placeholder-class="placeholder-style"
					v-model="uploadMessage.textareaMain"
					maxlength="-1"
				></textarea>
			</view>
			<view class="bottom">
				<view class="icon">
					<view class="" @click="additem(0)">
						<image src="../../static/calendar.png" v-if="changeDate == false"></image>
						<image src="../../static/calendarfilled.png" v-if="changeDate"></image>
					</view>
					<view class="" @click="additem(1)">
						<image src="/static/Time.png" v-if="changeTime == false"></image>
						<image src="../../static/timefilled.png" v-if="changeTime"></image>
					</view>
					<view class="" @click="additem(2)">
						<image src="/static/warn.png" v-if="changeWarn == false"></image>
						<image src="../../static/warnfilled.png" v-if="changeWarn"></image>
					</view>


				</view>
				<view class="add" @click="upLoad">
					添加
				</view>
			</view>
		</view>
		<view class="option">
			<view class="Date">
				<uni-popup ref="pickerDate" type="bottom" style="z-index: 9999999;">
					<view class="popup-view">
						<view class="popup-view-header">
							<view class="popup-view-cancel" @click="pickerCancel(0)">取消</view>
							<view class="popup-view-confirm" @click="pickerConfirm(0)">完成</view>
						</view>
						<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="selectDate"
							@change="bindChangeDate" class="picker-view">
							<picker-view-column>
								<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
							</picker-view-column>
							<picker-view-column>
								<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
							</picker-view-column>
							<picker-view-column>
								<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
							</picker-view-column>
						</picker-view>
					</view>
				</uni-popup>
			</view>
			<view class="Time">
				<uni-popup ref="pickerTime" type="bottom" style="z-index: 9999999;">
					<view class="popup-view">
						<view class="popup-view-header">
							<view class="popup-view-cancel" @click="pickerCancel(1)">取消</view>
							<view class="popup-view-confirm" @click="pickerConfirm(1)">完成</view>
						</view>
						<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="selectTime"
							@change="bindChangeTime" class="picker-view">
							<picker-view-column>
								<view class="item" v-for="(item,index) in Hours" :key="index">{{item}}时</view>
							</picker-view-column>
							<picker-view-column>
								<view class="item" v-for="(item,index) in Minutes" :key="index">{{item}}分</view>
							</picker-view-column>
						</picker-view>
					</view>
				</uni-popup>
			</view>
			<view class="Warn">
				<uni-popup ref="pickerWarn" type="bottom" style="z-index: 9999999;">
					<view class="popup-view">
						<view class="popup-view-header">
							<view class="popup-view-cancel" @click="pickerCancel(2)">取消</view>
							<view class="popup-view-confirm" @click="pickerConfirm(2)">完成</view>
						</view>
						<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="selectWarn"
							@change="bindChangeWarn" class="picker-view">
							<picker-view-column>
								<view class="item" v-for="(item,index) in WarnList" :key="index">{{item}}</view>
							</picker-view-column>
						</picker-view>
					</view>
				</uni-popup>
			</view>
			<view class="warningMessage">
				<uni-popup ref="message" type="message">
					<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
				</uni-popup>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			const Hours = []
			const Hour = date.getHours()
			const Minutes = []
			const Minute = date.getMinutes()
			for (let i = 2000; i <= date.getFullYear() + 30; i++) {
				years.push(i)
			}
			const Dateyear = years.indexOf(year)
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			const Datemonth = months.indexOf(month)
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			const Dateday = days.indexOf(day)
			for (let i = 0; i <= 23; i++) {
				Hours.push(i)
			}
			const Timehour = Hours.indexOf(Hour)
			for (let i = 0; i <= 59; i++) {
				Minutes.push(i)
			}
			const Timeminute = Minutes.indexOf(Minute)
			return {
				uploadMessage: {
					inputText: null,
					textareaMain: null,
					strDate: '',
					strHour: '',
					strWarn: '一般',
					isOver: false
				},
				title: 'picker-view',
				years,
				year,
				months,
				month,
				days,
				day,
				Hours,
				Hour,
				Minutes,
				Minute,
				visible: true,
				indicatorStyle: `height: 50px;`,
				changeDate: false,
				changeTime: false,
				changeWarn: false,
				WarnList: ['一般', '重要'],
				msgType: 'Error',
				messageText: '添加失败（仍旧存在未选择项目）',
				selectDate: [Dateyear, Datemonth, Dateday],
				selectTime: [Timehour, Timeminute],
				selectWarn: [0],
				createTime: null
			}
		},
		onShow() {
			var year = this.year.toString()
			var month = this.month.toString()
			var day = this.day.toString()
			var hour = this.Hour.toString()
			var minute = this.Minute.toString()

			this.uploadMessage.strDate = year + '-' + month + '-' + day
			this.uploadMessage.strHour = hour + ':' + minute
		},
		methods: {
			messageToggle() {
				this.$refs.message.open()
			},
			additem(e) {
				switch (e) {
					case 0:
						this.$refs.pickerDate.open();
						break
					case 1:
						this.$refs.pickerTime.open();
						break
					case 2:
						this.$refs.pickerWarn.open();
						break
				}
			},
			upLoad() {
				if (this.uploadMessage.inputText != null && this.changeDate &&
					this.changeTime && this.changeWarn) {
					const todoData = {
						inputText: this.uploadMessage.inputText,
						textareaMain: this.uploadMessage.textareaMain,
						strDate: this.uploadMessage.strDate,
						strHour: this.uploadMessage.strHour,
						strWarn: this.uploadMessage.strWarn,
						isOver: false,
						createTime: this.createTime || new Date()
					}
					uniCloud.callFunction({
						name: 'addTodolist',
						data: todoData
					}).then(() => {
						uni.showToast({
							title: '添加成功',
							icon: 'success'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}).catch(err => {
						console.error(err)
						uni.showToast({
							title: '添加失败',
							icon: 'none'
						})
					})
				} else {
					this.messageToggle()
				}
			},
			bindChangeDate: function(e) {
				var that = this
				const val = e.detail.value
				that.year = this.years[val[0]]
				var year = that.year.toString()
				that.month = this.months[val[1]]
				var month = that.month.toString()
				that.day = this.days[val[2]]
				var day = that.day.toString()
				that.selectDate = [val[0], val[1], val[2]]
				that.uploadMessage.strDate = year + '-' + month + '-' + day

			},
			bindChangeTime: function(e) {
				var that = this
				const val = e.detail.value
				that.Hour = this.Hours[val[0]]
				var hour = that.Hour.toString()
				that.Minute = this.Minutes[val[1]]
				if (that.Minute < 10) {
					var minute = '0' + this.Minute.toString()
				} else {
					var minute = this.Minute.toString()
				}
				that.selectTime = [val[0], val[1]]
				that.uploadMessage.strHour = hour + ':' + minute

			},
			bindChangeWarn: function(e) {
				var that = this
				const val = e.detail.value
				that.selectWarn = [val[0]]
				that.uploadMessage.strWarn = this.WarnList[that.selectWarn]


			},
			pickerConfirm(res) {
				switch (res) {
					case 0:
						this.$refs.pickerDate.close();
						this.changeDate = true
						break;
					case 1:
						this.$refs.pickerTime.close();
						this.changeTime = true
						break;
					case 2:
						this.$refs.pickerWarn.close();
						this.changeWarn = true
						break;

				}
			},
			pickerCancel(res) {
				switch (res) {
					case 0:
						this.$refs.pickerDate.close();
						break;
					case 1:
						this.$refs.pickerTime.close();
						break;
					case 2:
						this.$refs.pickerWarn.close();
						break;

				}
			}
		}
	}
</script>

<style>
	page {
		position: relative;
	}

	.background-image {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-image: url('/static/picture/true.jpg');
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		z-index: -1;
	}

	.contain {
		position: relative;
		z-index: 1;
		min-height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20px 0;
	}

	.body {
		width: 90%;
		max-width: 600px;
		margin: 0 auto;
		background-color: rgba(255, 255, 255, 0.9);
		border-radius: 10px;
		padding: 25px;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	}

	.body-item {
		padding: 12px;
		margin-bottom: 15px;
		border-bottom: none;
		background-color: rgba(255, 255, 255, 0.7);
		border-radius: 8px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;
	}

	.body-item:focus-within {
		background-color: rgba(255, 255, 255, 0.9);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	}

	.title-input input {
		font-size: 18px;
		font-weight: 500;
		width: 100%;
		padding: 8px 0;
		color: #333;
	}

	.content-input {
		margin-top: 15px;
	}

	textarea {
		width: 100%;
		height: 250px;
		font-size: 16px;
		line-height: 1.6;
		color: #444;
		padding: 8px 0;
		border: none;
		background: transparent;
		resize: none;
	}

	.placeholder-style {
		color: #999;
		font-size: 14px;
	}

	.add {
		padding: 12px 24px;
		background: linear-gradient(135deg, #6e8efb, #4a6cf7);
		color: white;
		border-radius: 20px;
		font-weight: 500;
		box-shadow: 0 4px 15px rgba(74, 108, 247, 0.2);
		transition: all 0.3s ease;
	}

	.add:active {
		transform: scale(0.98);
		box-shadow: 0 2px 8px rgba(74, 108, 247, 0.2);
	}

	.icon {
		display: flex;
		align-items: center;
		gap: 15px;
		padding: 0 10px;
	}

	.icon image {
		height: 24px;
		width: 24px;
		margin: 0;
		opacity: 0.7;
		transition: all 0.3s ease;
	}

	.icon image:active {
		opacity: 1;
		transform: scale(1.1);
	}

	.bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20px;
		padding: 10px 5px;
	}

	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}

	.popup-view-header {
		text-align: center;
		width: 100%;
		height: 90rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #F5F5F5;
	}

	.popup-view {
		background-color: #FFFFFF;

		.picker-view {
			width: 100%;
			height: 476rpx;
			margin-top: 20rpx;

			.item {
				height: 68rpx !important;
				line-height: 68rpx;
				text-align: center;
				color: #000;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				cursor: pointer;
			}
		}
	}

	.popup-view-cancel {
		max-width: 50%;
		height: 100%;
		box-sizing: border-box;
		padding: 0 28rpx;
		font-size: 34rpx;
		line-height: 90rpx;
		color: #888888;
	}

	.popup-view-confirm {
		max-width: 50%;
		height: 100%;
		box-sizing: border-box;
		padding: 0 28rpx;
		font-size: 34rpx;
		line-height: 90rpx;
		color: #007aff;
	}
</style>